<template>
    <div class="content-right">
        <Card shadow>
            <p class="examination-room-info">
                <router-link :to="{name:'examinee-management',query:{id:this.$route.query.id}}">
                    <i-button type="default" icon="ios-arrow-left" class="back-examinee-btn">返回考生列表</i-button>
                </router-link>
                <span>考场名称：{{eRoomName}}</span>
                <span>考场状态：{{status}}</span>
                <span>当前参考人数：{{personnelNum}}人</span>
            </p>
            <p><Icon type="asterisk" size="small"></Icon>第一步：选择导入方式</p>
            <!-- tab选项卡 -->
            <Tabs :animated="false" class="examinee-into-tab">
                <Tab-pane label="从用户中心导入">
                    <p><Icon type="asterisk" size="small"></Icon>第二步：考生导入</p>
                    <!-- formA -->
                    <form @keyup.enter="search1" ref="form1" class="examinee-search-form">
                        <Row :gutter="16">
                            <i-col span="6">
                                <div>
                                    <Input v-model="form1.key" placeholder="请输入考生ID/姓名/身份证号/电话号码"></Input>
                                </div>
                            </i-col>
                            <Col span="3">
                                <div>
                                    <i-select v-model="form1.sex" clearable placeholder="用户性别">
                                        <i-option value="1">男</i-option>
                                        <i-option value="0">女</i-option>
                                    </i-select>    
                                </div>
                            </Col>
                            <Col span="3">
                                <div>
                                    <i-select v-model="form1.age" clearable placeholder="用户年龄">
                                        <i-option v-for="v in ageList" :key="v.value" :value="v.value">{{v.text}}</i-option>
                                    </i-select> 
                                </div>
                            </Col>
                            <Col span="3">
                                <div><i-button @click="search1" type="primary">搜索</i-button></div>
                            </Col>
                        </Row>
                    </form>
                    <!-- tableA -->
                    <div class="examinee-search-table">
                        <Table border ref="selection" :columns="columns4A" :data="userData" @on-selection-change="selectMore1"></Table>
                        <Checkbox @on-change="handleSelectAllA()" v-model="checkAll">全选</Checkbox>
                        <Button @click="selectJoin">加入考场</Button><Button @click="batchOutA()">移出考场</Button>
                        <Page :total="userDataTotal" show-total show-elevator class="tablePage" :current="page1" @on-change="changePage1" :page-size='10'></Page>
                    </div>
                </Tab-pane>
                <Tab-pane label="按历史考场记录导入">
                    <p><Icon type="asterisk" size="small"></Icon>第二步：考生导入</p>
                    <!-- formB -->
                    <form @keyup.enter="search2" ref="form2" class="examinee-search-form">
                        <Row :gutter="16">
                            <Col span="3">
                                <div>
                                    <Input v-model="form2.keywords2" placeholder="请输入考场名称关键字"></Input>
                                </div>
                            </Col>
                            <Col span="3">
                                <div>
                                    <i-select v-model="form2.testStatus" clearable placeholder="考试状态">
                                        <i-option value="1">正常</i-option>
                                        <i-option value="0">缺考</i-option>
                                    </i-select>    
                                </div>
                            </Col>
                            <Col span="3">
                                <div>
                                    <i-select v-model="form2.isQualified" clearable placeholder="是否合格">
                                        <i-option value="合格">合格</i-option>
                                        <i-option value="不合格">不合格</i-option>
                                    </i-select> 
                                </div>
                            </Col>
                            <Col span="3">
                                <div>
                                    <Input v-model="form2.keywords" placeholder="请输入考生ID/姓名/身份证号/电话号码"></Input>
                                </div>
                            </Col>
                            <Col span="6">
                                <div>
                                     <label>分数区间：</label><Input v-model="gradeGt" style="width: 60px"></Input><Icon type="minus" class="line"></Icon><Input v-model="gradeLt" style="width: 60px"></Input>
                                </div>
                            </Col>
                            <Col span="2">
                                <div><i-button @click="search2" type="primary">搜索</i-button></div>
                            </Col>
                        </Row>
                    </form>
                    <!-- tableB -->
                    <div class="examinee-search-table">
                        <Table border ref="selection2" :columns="columns4B" :data="historyList" @on-selection-change="selectMore2"></Table>
                        <Checkbox @on-change="handleSelectAllB()" v-model="checkAll2">全选</Checkbox>
                        <Button @click="selectJoin2">加入考场</Button><Button  @click="batchOutB()">移出考场</Button>
                        <Page :total="historyTotal" show-total show-elevator class="tablePage" :current="page2" @on-change="changePage2" :page-size='10'></Page>
                    </div>
                </Tab-pane>
            </Tabs>
        </Card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import $store from '@/store/index.js'
import Vue from 'vue';
var $vue=new Vue();
export default {
    data() {
        return {
            //考场名称
            eRoomName:'',
            //考场状态
            status:'',
            //当前参考人数
            personnelNum:0,
            //tableA列表
            userData:[],
            //tableA分页总数
            userDataTotal:0,
            //tableB列表
            historyList:[],
            //tableB分页总数
            historyTotal:0,
            //tableA当前页数
            page1:1,
            //tableB当前页数
            page2:1,
            //tableA搜索表单
            form1:{
                key:'',
                sex:'',
                age:''
            },
            //tableB搜索表单
            form2:{
                keywords2:'',
                keywords:'',
                testStatus:'',
                isQualified:''
            },
            //年龄
            ageList: [
                {value:'0,19',text:'19岁及以下'},
                {value:'20,29',text:'20~29岁'},
                {value:'30,39',text:'30~39岁'},
                {value:'40,49',text:'40~49岁'},
                {value:'50,99',text:'50岁及以上'}
            ],
            //最小年龄
            ageGt:'',
            //最大年龄
            ageLt:'',
            //最小分数
            gradeGt:'',
            //最大分数
            gradeLt:'',
            //tableA选择到的数据
            Something1:'',
            //tableB选择到的数据
            Something2:'',
            //tableA全选checkbox
            checkAll:false,
            //tableB全选checkbox
            checkAll2:false,
            // tableA
            columns4A: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'Id',
                    key: 'Id',
                    align: 'center',             
                },
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '身份证号',
                    key: 'idcard',
                    align: 'center',
                    render:(h,params)=>{
                        var num=params.row.idcard;
                        return h('div',num=num.slice(0,3)+"****"+num.slice(num.length-4,))
                    }
                },
                {
                    title: '绑定手机',
                    key: 'phone',
                    align: 'center',
                    render:(h,params)=>{
                        var num=params.row.phone;
                        return h('div',num=num.slice(0,3)+"****"+num.slice(num.length-4,))
                    }
                },
                {
                    title: '性别',
                    key: 'sex',
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',params.row.sex?'男':'女')
                    }
                },
                {
                    title: '年龄',
                    key: 'age',
                    align: 'center'
                },
                {
                    title: '操作',
                    key:'action',
                    align:'center',
                    render:(h,params) => {
                        return h('div',[params.row.isAddRoom?
                            h('Button',{
                                props:{
                                    type:'error',
                                    icon:'ios-trash-outline'
                                },
                                on:{
                                    click:()=>{
                                        this.$Modal.confirm({
                                        content: '<h4>是否确认将该考生移出考场，考生被移出后，考生将无法查看及参加本次考试。</h4>',
                                        onOk: () => {
                                                var that=this;
                                                var eRoomId=this.$route.query.id;
                                                var examineeId=params.row.Id;
                                                this.axios({
                                                    method:'post',
                                                    url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/del',
                                                    data:{
                                                        examineeId:examineeId,
                                                        examinationRoomId:eRoomId
                                                    }
                                                }).then(function(res){
                                                    if(res.data.msg=='操作成功'){
                                                        that.$Message.success('移出成功');
                                                        that.userDataLoad();
                                                        that.eRoomInfo();
                                                    }else{
                                                        that.$Message.error('移出失败');
                                                    }
                                                })
                                            }
                                        })
                                    }
                                }
                            },"移出考场")
                            :h('Button',{
                                props:{
                                    type:'primary',
                                    icon:'plus-circled'
                                },
                                on:{
                                    click:()=>{
                                        var that=this;
                                        var eRoomId=this.$route.query.id;
                                        var examineeId=params.row.Id;
                                        this.axios({
                                            method:'post',
                                            url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/add',
                                            data:{
                                                examineeId:examineeId,
                                                examinationRoomId:eRoomId
                                            }
                                        }).then(function(res){
                                            if(res.data.msg=='操作成功'){
                                                that.$Message.success('加入成功');
                                                that.userDataLoad();
                                                that.eRoomInfo();
                                            }else{
                                                that.$Message.error('加入失败');
                                            }
                                        })
                                    }
                                }
                            },"加入考场")] 
                        )
                    }
                }
            ],
            // tableB
            columns4B: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'Id',
                    key: 'Id',
                    align: 'center'                 
                },
                {
                    title: '考场名称',
                    key: 'eRoomName',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '真实姓名',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '身份证号',
                    key: 'idcard',
                    align: 'center',
                    render:(h,params)=>{
                        var num=params.row.idcard;
                        return h('div',num=num.slice(0,3)+"****"+num.slice(num.length-4,))
                    }
                },
                {
                    title: '绑定手机',
                    key: 'phone',
                    align: 'center',
                    render:(h,params)=>{
                        var num=params.row.phone;
                        return h('div',num=num.slice(0,3)+"****"+num.slice(num.length-4,))
                    }
                },
                {
                    title: '考试状态',
                    key: 'testStatus',
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',params.row.testStatus?'正常':'缺考')
                    }
                },
                {
                    title: '考试分数',
                    key:'grade',
                    align: 'center'
                },
                {
                    title: '是否合格',
                    key:'isQualified',
                    align: 'center'
                },
                {
                    title: '操作',
                    key:'action',
                    align: 'center',
                    render:(h,params) => {
                        return h('div',[params.row.isAddRoom?
                            h('Button',{
                                props:{
                                    type:'error',
                                    icon:'ios-trash-outline'
                                },
                                on:{
                                    click:()=>{
                                        this.$Modal.confirm({
                                        content: '<h4>是否确认将该考生移出考场，考生被移出后，考生将无法查看及参加本次考试。</h4>',
                                        onOk: () => {
                                                var that=this;
                                                var eRoomId=this.$route.query.id;
                                                var examineeId=params.row.Id;
                                                this.axios({
                                                    method:'post',
                                                    url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/del',
                                                    data:{
                                                        examineeId:examineeId,
                                                        examinationRoomId:eRoomId
                                                    }
                                                }).then(function(res){
                                                    if(res.data.msg=='操作成功'){
                                                        that.$Message.success('移出成功');
                                                        that.historyLoad();
                                                        that.eRoomInfo();
                                                    }else{
                                                        that.$Message.error('移出失败');
                                                    }
                                                })
                                            }
                                        })
                                    }
                                }
                            },"移出考场")
                            :h('Button',{
                                props:{
                                    type:'primary',
                                    icon:'plus-circled'
                                },
                                on:{
                                    click:()=>{
                                        var that=this;
                                        var eRoomId=this.$route.query.id;
                                        var examineeId=params.row.Id;
                                        this.axios({
                                            method:'post',
                                            url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/add',
                                            data:{
                                                examineeId:examineeId,
                                                examinationRoomId:eRoomId
                                            }
                                        }).then(function(res){
                                            if(res.data.msg=='操作成功'){
                                                that.$Message.success('加入成功');
                                                that.historyLoad();
                                                that.eRoomInfo();
                                            }else{
                                                that.$Message.error('加入失败');
                                            }
                                        })
                                    }
                                }
                            },"加入考场")]
                            
                        )
                    }
                }
            ]
        }
    },
    //页面加载之前
    created:function(){
        //tableA用户中心数据加载
        this.userDataLoad();
        //tableB历史考场记录加载
        this.historyLoad();
        //获取考场信息
        this.eRoomInfo();
    },
    //监听
    watch:{
        //年龄
        'form1.age'(n,o){
            var agearr=this.form1.age.split(',');
            this.ageGt=parseInt(agearr[0]);
            this.ageLt=parseInt(agearr[1]);
        }
    },
    methods: {
        //获取考场信息
        eRoomInfo(){
            var that=this;
            //考场ID
            var id=this.$route.query.id;
            this.axios({
                method:'get',
                url:that.$store.state.app.globalUrl+'/admin/ExaminationRoom/getDetail?id='+id,
                data:{
                }
            }).then(function(res){
                that.status=res.data.data.examinationRoom.examStatusStr;
                that.personnelNum=res.data.data.examinationRoom.testPersonnelNum;
                that.eRoomName=res.data.data.examinationRoom.name;
            })
        },
        //tableA获取选择到的ID
        selectMore1(num){
            this.Something1=[];
            num.forEach((item,index)=>{
                this.Something1.push(item.Id)
            });
            //全选
            if(this.Something1.length==this.userData.length){
                this.checkAll=true;
            }else{
                this.checkAll=false;
            }
        },
        //tableB获取选择到的ID
        selectMore2(num){
            this.Something2=[];
            num.forEach((item,index)=>{
                this.Something2.push(item.Id)
            });
            //全选
            if(this.Something2.length==this.historyList.length){
                this.checkAll2=true;
            }else{
                this.checkAll2=false;
            }
        },
        //tableA全选
        handleSelectAllA() {
            this.$refs.selection.selectAll(this.checkAll);
        },
        //tableB全选
        handleSelectAllB() {
            this.$refs.selection2.selectAll(this.checkAll2);
        },
        //tableA批量加入考场
        selectJoin(){
            if(this.Something1.length>0){
                var that=this;
                //选择的条数
                var selects=this.Something1
                //考场ID
                var eRoomId=this.$route.query.id;
                this.axios({
                    method:'post',
                    url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/add',
                    data:{
                        examineeId:selects.join(','),
                        examinationRoomId:eRoomId
                    }
                }).then(function(res){
                    if(res.data.msg=='操作成功'){
                        that.$Message.success('加入成功');
                        that.eRoomInfo();
                        that.userDataLoad();
                        that.checkAll=false;
                        that.Something1=[];
                    }else{
                        that.$Message.error('加入失败');
                    }
                })
            }else{
                this.$Message.error("未选择考生");
            }
        },
        //tableB批量加入考场
        selectJoin2(){
            if(this.Something2.length>0){
                var that=this;
                //选择的条数
                var selects=this.Something2;
                //考场ID
                var eRoomId=this.$route.query.id;
                this.axios({
                    method:'post',
                    url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/add',
                    data:{
                        examineeId:selects.join(','),
                        examinationRoomId:eRoomId
                    }
                }).then(function(res){
                    if(res.data.msg=='操作成功'){
                        that.$Message.success('加入成功');
                        that.eRoomInfo();
                        that.historyLoad();
                        that.checkAll2=false;
                        that.Something2=[];
                    }else{
                        that.$Message.error('加入失败');
                    }
                })
            }else{
                this.$Message.error("未选择考生");
            }
        },
        //tableA批量移出考场
        batchOutA(){
            if(this.Something1.length>0){
                this.$Modal.confirm({
                    content: '<h4>是否确认批量将选中考生移出考场？</h4>',
                    onOk: () => {
                        var that=this;
                        //选择的条数
                        var selects=this.Something1
                        //考场ID
                        var eRoomId=this.$route.query.id;
                        this.axios({
                            method:'post',
                            url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/del',
                            data:{
                                examineeId:selects.join(','),
                                examinationRoomId:eRoomId
                            }
                        }).then(function(res){
                            if(res.data.msg=='操作成功'){
                                that.$Message.success('移出成功');
                                that.eRoomInfo();
                                that.userDataLoad();
                                that.checkAll=false;
                                that.Something1=[];
                            }else{
                                that.$Message.error('移出失败');
                            }
                        })
                    }
                })
            }else{
                this.$Message.error("未选择考生");
            }
        },
        //tableB批量移出
        batchOutB(){
            if(this.Something2.length>0){
                this.$Modal.confirm({
                    content: '<h4>是否确认批量将选中考生移出考场？</h4>',
                    onOk: () => {
                        var that=this;
                        //选择的条数
                        var selects=this.Something2
                        //考场ID
                        var eRoomId=this.$route.query.id;
                        this.axios({
                            method:'post',
                            url:that.$store.state.app.globalUrl+'/admin/TestPersonnel/del',
                            data:{
                                examineeId:selects.join(','),
                                examinationRoomId:eRoomId
                            }
                        }).then(function(res){
                            if(res.data.msg=='操作成功'){
                                that.$Message.success('移出成功');
                                that.eRoomInfo();
                                that.historyLoad();
                                that.checkAll2=false;
                                that.Something2=[];
                            }else{
                                that.$Message.error('移出失败');
                            }
                        })
                    }
                })
            }else{
                this.$Message.error("未选择考生");
            }
        },
        //tableA用户中心数据加载
        userDataLoad(){
            var that=this;
            //当前页数
            var page=this.page1;
            //考场ID
            var id=this.$route.query.id;
            //关键字
            var key=this.form1.key;
            //性别
            var sex=this.form1.sex;
            //最小年龄
            var ageGt=this.ageGt;
            //最大年龄
            var ageLt=this.ageLt;
            this.axios({
                methods:'get',
                url:that.$store.state.app.globalUrl+'/admin/Examinee/eRoomGetList?size=10&page='+page+'&eRoomId='+id+(key==''||key==undefined?'':'&keywords='+key)+(sex==''||sex==undefined?'':'&sex='+sex)+(ageGt==''||ageGt==undefined||isNaN(ageGt)?'':'&ageGt='+ageGt)+(ageLt==''||ageLt==undefined||isNaN(ageLt)?'':'&ageLt='+ageLt),
                data:{}
            }).then(function(res){
                that.userData=res.data.data.list;
                that.userDataTotal=res.data.data.count;
            })
        },
        //tableB历史考场记录加载
        historyLoad(){
            var that=this;
            //当前页数
            var pageNow=that.page2;
            //考场ID
            var eRoomId=this.$route.query.id;
            //考场关键字
            var keywords2=this.form2.keywords2;
            //考生关键字
            var keywords=this.form2.keywords;
            //考试状态
            var testStatus=this.form2.testStatus;
            //是否加入考场
            var isQualified=this.form2.isQualified;
            //最小分数
            var gradeGt=this.gradeGt;
            //最大分数
            var gradeLt=this.gradeLt;
            this.axios({
                method:'get',
                url:that.$store.state.app.globalUrl+'/admin/Examinee/eHistoryGetList?eRoomId='+eRoomId+'&size=10&page='+pageNow+(keywords2==''||keywords2==undefined?'':'&keywords2='+keywords2)+(keywords==''||keywords==undefined?'':'&keywords='+keywords)+(testStatus==''||testStatus==undefined?'':'&testStatus='+testStatus)+(isQualified==''||isQualified==undefined?'':'&isQualified='+isQualified)+(gradeGt==''||gradeGt==undefined?'':'&gradeGt='+gradeGt)+(gradeLt==''||gradeLt==undefined?'':'&gradeLt='+gradeLt)
            }).then(function(res){
                that.historyList=res.data.data.list;
                that.historyTotal=res.data.data.count;
            })
        },
        //tableA翻页加载数据
        changePage1(n){
            this.page1=n;
            this.userDataLoad();
            this.Something1=[];
            this.checkAll=false;
        },
        //tableB翻页加载数据
        changePage2(n){
            this.page2=n;
            this.historyLoad();
            this.Something2=[];
            this.checkAll2=false;
        },
        //tableA用户中心搜索
        search1(){
            this.page1=1;
            this.userDataLoad();
        },
        //tableB历史考场记录搜索
        search2(){
            this.page2=1;
            this.historyLoad();
        }
    }
};
</script>
<style scoped>
.examination-room-info{margin:20px 0;}
.examination-room-info span{margin-right:20px;}
.back-examinee-btn{margin-right:20px;}
.examinee-search-form{margin:20px 0;}
.examinee-search-table .ivu-table-wrapper{margin-bottom:20px;}
.examinee-search-table Button{margin-right:8px;}
.examinee-search-table .tablePage{float:right;}
.line{margin:4px;}
</style>